<template>
  <v-navigation-drawer
    v-model="appStore.drawer"
    :elevation="2"
    :expand-on-hover="appStore.rail"
    :location="appStore.drawerLocation"
    :mobile="$vuetify.display.mobile"
    :order="appStore.order"
    :permanent="appStore.permanent"
    :rail="appStore.rail"
    :temporary="!appStore.permanent"
    :width="width"
  >
    <!--  120+56*菜单层级 ，与256取较大值 -->

    <v-list-item
      nav
      prepend-avatar="https://randomuser.me/api/portraits/men/85.jpg"
      title="John Leider"
    >
    </v-list-item>

    <v-divider></v-divider>
    <menu-item-list :menus="menuStore.allMenus"/>
  </v-navigation-drawer>
</template>
<script lang="ts" setup>
import {useAppStore} from "@/stores/app";
import MenuItemList from "@/layouts/components/MenuItemList.vue";
import {useMenuStore} from "@/stores/menu";
import {computed} from "vue";

const menuStore = useMenuStore()
const appStore = useAppStore();
const width = computed(() => {
  return Math.max(120 + 56 * menuStore.maxLevel, 256)
})
</script>
<style scoped>

</style>
